<template>
  <div class="group-item">
    <div class="group-item-chart" :id="'charts' + index"></div>
  </div>
</template>
<script>
window.wx = {};
export default {
  props: {
    index: {
      type: Number,
      default: 0,
    },
    option: {
      type: Object,
      default() {
        return {};
      },
    },
    chartData: {
      type: Array,
      default() {
        return [];
      },
    },
    indicator: {
      type: String,
      default() {
        return [];
      },
    },
  },
  methods: {
    // 获取需要生成图表的元素
    // 以下是一些常用的配置参数 都有写明详细的注释
    initChart() {
      var arr = [];
      this.chartData.forEach((v, i) => {
        arr.push(v.name);
      });
      let myEcharts = null;
      let ids = "charts" + String(this.index);
      myEcharts = this.$echarts.init(document.getElementById(ids));
      console.log(myEcharts, 9999);
      let option = {
        // legend: {},
        legend: {
          data: [this.indicator],
          icon: "circle",
          itemWidth: 10, // 设置每个图例标记的宽度为15像素
          itemHeight: 10, // 设置每个图例标记的高度为10像素
          textStyle: {
            color: "#999999",
          },
        },
        tooltip: {},
        // dataset: {
        // 	dimensions: ['product', '成语填字', '词语填字'],
        // 	source: [{
        // 			product: '成语填字',
        // 			"成语填字": 43.3,
        // 			"词语填字": 85.8,

        // 		},
        // 		{
        // 			product: '词语填字',
        // 			"成语填字": 13.3,
        // 			"词语填字": 45.8,

        // 		}
        // 	]
        // },
        grid: {
          left: "1%",
          right: "1%",
          bottom: "1%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          data: arr,
          axisLine: {
            lineStyle: {
              show: true, //是否显示坐标轴轴线，
              color: "#8C8C8C", //x轴轴线的颜色
              width: 1, //x轴粗细
            },
          },
          axisTick: {
            show: true, //是否显示刻度
            lineStyle: {
              color: "#8C8C8C",
            }, // x轴刻度的颜色
          },
          axisLabel: {
            show: true, // 是否显示刻度标签，默认显示
            interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
            // rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
            inside: false, // 刻度标签是否朝内，默认朝外
            // margin: 6, // 刻度标签与轴线之间的距离
          },
        },
        yAxis: {
          axisLabel: {
            color: "#999999",
          },
          splitLine: {
            show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示
            type: "solid", // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
            lineStyle: {
              color: "#E5E5E5",
              width: 1, // 设置分割线的粗细为2
            },
          },
        },

        series: [
          // {
          // 	type: 'bar',
          // 	barWidth: 12,
          // 	data: [5, 20, 36, 10, 10, 20, 4],
          // 	name: "成语填字",
          // 	itemStyle: {
          // 		borderRadius: [20, 20, 0, 0],
          // 		// 设置柱状渐变色
          // 		color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{
          // 				offset: 0,
          // 				color: '#8CA4FD'
          // 			},
          // 			{
          // 				offset: 1,
          // 				color: '#4F6CD8'
          // 			}
          // 		]),

          // 	}
          // },
          {
            barWidth: 12,
            data: this.chartData,
            type: "bar",
            name: this.indicator,
            barGap: 0.5, //柱子之间间距
            itemStyle: {
              borderRadius: [20, 20, 0, 0],
              // 设置柱状渐变色
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [
                {
                  offset: 0,
                  color: "#FFB273",
                },
                {
                  offset: 1,
                  color: "#FF7D41",
                },
              ]),
            },
          },
          // {
          // 	barWidth: 12,
          // 	data: [13, 3, 4, 5, 6, 7, 4],
          // 	type: 'bar',
          // 	name: "自由练习",
          // 	itemStyle: {
          // 		borderRadius: [20, 20, 0, 0],
          // 		// 设置柱状渐变色
          // 		color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{
          // 				offset: 0,
          // 				color: '#4FF279'
          // 			},
          // 			{
          // 				offset: 1,
          // 				color: '#06BB0C'
          // 			}
          // 		]),

          // 	}
          // },
          // {
          // 	barWidth: 12,
          // 	data: [13, 3, 4, 5, 6, 7, 4],
          // 	type: 'bar',
          // 	name: "趣味练字",
          // 	itemStyle: {
          // 		borderRadius: [20, 20, 0, 0],
          // 		// 设置柱状渐变色
          // 		color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{
          // 				offset: 0,
          // 				color: '#00B0FF'
          // 			},
          // 			{
          // 				offset: 1,
          // 				color: '#6FE5FF'
          // 			}
          // 		]),

          // 	}
          // }
        ],
      };

      if (myEcharts) {
        myEcharts.setOption(option);
      }
      console.log(this.index);
      myEcharts.on("click", function (params) {
        console.log(params.name);
      });
      console.log("===echarts", myEcharts);
      window.addEventListener("resize", function () {
        myEcharts.resize();
      });
    },
  },
  watch: {
    chartData: {
      handler() {
        this.initChart();
      },
      deep: true,
    },
  },
  // 然后在mounted里调用该方法就可以了
  mounted() {
    this.initChart();
  },
};
</script>
<style lang="scss" scoped>
.group-item {
  width: 100%;
  height: 614rpx;
  margin-top: 30rpx;

  .group-item-chart {
    width: 100%;
    height: 614rpx;
  }
}
</style>
